<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube 视频下载器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 左侧面板 -->
            <div class="col-md-4 bg-light vh-100 p-4">
                <h1 class="h3 mb-4">
                    <i class="bi bi-youtube text-danger"></i>
                    YouTube 下载器
                </h1>
                
                <!-- URL 输入 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-link-45deg"></i>
                            输入链接
                        </h5>
                        <div class="input-group mb-3">
                            <input type="url" class="form-control" id="urlInput" 
                                   placeholder="粘贴 YouTube 视频链接...">
                            <button class="btn btn-primary" type="button" id="extractBtn">
                                <i class="bi bi-search"></i>
                                解析
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 下载任务 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-download"></i>
                            下载任务
                        </h5>
                        <div id="downloadTasks">
                            <p class="text-muted">暂无下载任务</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧内容区域 -->
            <div class="col-md-8 p-4">
                <!-- 加载状态 -->
                <div id="loadingState" class="text-center py-5" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-3">正在解析视频信息...</p>
                </div>

                <!-- 视频信息 -->
                <div id="videoInfo" style="display: none;">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <img id="videoThumbnail" class="img-fluid rounded" alt="视频缩略图">
                                </div>
                                <div class="col-md-8">
                                    <h3 id="videoTitle" class="card-title"></h3>
                                    <p class="text-muted mb-2">
                                        <i class="bi bi-person"></i>
                                        <span id="videoUploader"></span>
                                    </p>
                                    <p class="text-muted mb-2">
                                        <i class="bi bi-eye"></i>
                                        <span id="videoViews"></span> 次观看
                                    </p>
                                    <p class="text-muted mb-2">
                                        <i class="bi bi-clock"></i>
                                        <span id="videoDuration"></span>
                                    </p>
                                    <p class="text-muted mb-2">
                                        <i class="bi bi-calendar"></i>
                                        <span id="videoDate"></span>
                                    </p>
                                    <p id="videoDescription" class="small text-secondary"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 下载选项 -->
                    <div class="row">
                        <!-- 视频格式 -->
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="bi bi-camera-video"></i>
                                        视频格式
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="videoFormats" class="list-group list-group-flush">
                                        <!-- 动态生成 -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 音频格式 -->
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="bi bi-music-note"></i>
                                        音频格式
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="audioFormats" class="list-group list-group-flush">
                                        <!-- 动态生成 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 字幕下载 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-chat-square-text"></i>
                                字幕下载
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="subtitleFormats" class="d-flex flex-wrap gap-2">
                                <!-- 动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 错误信息 -->
                <div id="errorInfo" class="alert alert-danger" style="display: none;" role="alert">
                    <i class="bi bi-exclamation-triangle"></i>
                    <span id="errorMessage"></span>
                </div>

                <!-- 欢迎信息 -->
                <div id="welcomeInfo" class="text-center py-5">
                    <i class="bi bi-youtube display-1 text-danger"></i>
                    <h2 class="mt-3">YouTube 视频下载器</h2>
                    <p class="lead text-muted">在左侧输入 YouTube 视频链接开始下载</p>
                    <div class="alert alert-info">
                        <h6><i class="bi bi-info-circle"></i> 支持功能：</h6>
                        <ul class="list-unstyled mb-0">
                            <li>• 多种视频清晰度下载</li>
                            <li>• 仅音频下载</li>
                            <li>• 字幕下载（多语言）</li>
                            <li>• 实时下载进度显示</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 下载进度模态框 -->
    <div class="modal fade" id="progressModal" tabindex="-1" aria-labelledby="progressModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="progressModalLabel">
                        <i class="bi bi-download"></i>
                        下载进度
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span id="progressFileName">准备下载...</span>
                            <span id="progressPercent">0%</span>
                        </div>
                        <div class="progress">
                            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-4">
                            <small class="text-muted">速度</small><br>
                            <span id="progressSpeed">-</span>
                        </div>
                        <div class="col-4">
                            <small class="text-muted">剩余时间</small><br>
                            <span id="progressETA">-</span>
                        </div>
                        <div class="col-4">
                            <small class="text-muted">状态</small><br>
                            <span id="progressStatus">准备中</span>
                        </div>
                    </div>
                    <div id="downloadComplete" class="text-center mt-3" style="display: none;">
                        <div class="alert alert-success">
                            <i class="bi bi-check-circle"></i>
                            下载完成！
                        </div>
                        <a id="downloadLink" class="btn btn-success" href="#" download>
                            <i class="bi bi-download"></i>
                            下载文件
                        </a>
                    </div>
                    <div id="downloadError" class="alert alert-danger" style="display: none;">
                        <i class="bi bi-exclamation-triangle"></i>
                        <span id="downloadErrorMessage"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
